<template>
    <div class="tabs">
        <router-link to="/index" class="aitem">
            <img v-if="$route.name=='index'" class="aimg" src="../assets/images/home-on.png" alt="" >
            <img v-else src="../assets/images/home.png"  class="aimg" alt="">
            <span class="atext" style="font-size: 12px;">参与活动</span>
        </router-link>
        <!-- <router-link to="/home" class="aitem">
            <i class="el-icon-s-order" ></i>
            <div>省</div>
        </router-link> -->
        <router-link to="/messageList" class="aitem">
            <i class="el-icon-s-order" ></i>
            <span class="atext"  style="font-size: 12px;">活动资讯</span>
        </router-link>
        <router-link to="/personalinfo" class="aitem">
            <i class="el-icon-user-solid"></i>
            <span class="atext"  style="font-size: 12px;">个人中心</span>
        </router-link>
    </div>
</template>

<style lang="scss" scoped>
.tabs{
    width:100%;
    position: fixed;
    bottom:0;
    left:0;
    height:48px;
    background: #fff;
    display: flex;
    .router-link-active{
        color:#E21B1B  !important;
    }
    .aitem{
        display: flex;
        flex:1;
        height:44px;
        justify-content: center;
        align-items: center;
        color:#999999;
        font-size: 18px;
        flex-direction: column;
        .aimg{
            width:14px;
            height:14px;
        }
        i{
            margin-top:2px;
            font-size: 16px !important;
        }
        span{
            font-size: 10px;
            
            font-weight: 400;
            margin-top:5px;
        }
    }
}
</style>